<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header a {
            color: #666;
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
            display: inline-block;
            margin-top: 30px;
        }

        .el-menu.el-menu--horizontal {
            border-bottom: 0;
        }
        .el-main h3{
            font-size: 20px;
            color: white;
        }
        .el-main p{
            font-size: 12px;
            color: white;
        }
        .el-main a{
            text-decoration: none;
        }


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width: 1200px">
                <img style="vertical-align: middle;margin-right: 50px" src="imgs/logo.png" width="200px">
            </div>
            <!--导航菜单开始-->
            <div style="background-color: #0aa1ed;overflow: hidden">
                <el-menu style="width: 1200px;margin: 0 auto;height: 80px;" mode="horizontal"
                         background-color="#0aa1ed" text-color="#fff" active-text-color="#fff">
                    <a href="">首页</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">找好友</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">圈子</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">留言板</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">消息</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">APP下载</a>
                    <div style="float: right;position:relative;height: 50px;">
                        <a href="">注册</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">登陆</a>
                    </div>
                </el-menu>
            </div>
            <!--导航菜单结束-->
        </el-header>

        <el-main>
            <!-- 图片-->
            <div>
                <el-carousel trigger="click" height="400px;">
                    <el-carousel-item v-for="item in 4">
                        <img :src="'imgs/b'+item+'.png'" width="100%">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!--各个交友专区-->
            <div class="zhuanqu" style="height: 300px; width: 1200px;margin: 0 auto">
                <el-row gutter="10">
                    <el-col span="8" style="text-align: center;">
                        <el-card style="background-image: url(imgs/zq1.png);width:  296px;height: 149px">
                            <a href="" ><h3>高颜值专区</h3><p>外貌协会，不止看外貌</p></a>
                        </el-card>
                    </el-col>
                    <el-col span="8" style="text-align: center;">
                        <el-card style="background-image: url(imgs/zq2.png);width:  296px;height: 149px">
                            <a href=""><h3>公务员专区</h3><p>为什么那么多人考公务员,因为好找对象</p></a>
                        </el-card>
                    </el-col>
                    <el-col span="8" style="text-align: center;">
                        <el-card style="background-image: url(imgs/zq3.png);width:  296px;height: 149px">
                            <a href=""><h3>厨艺达人专区</h3><p>会做饭的男人,人品都不会太差</p></a>
                        </el-card>
                    </el-col>
                    <el-col span="8" style="text-align: center;">
                        <el-card style="background-image: url(imgs/zq4.png);width:  296px;height: 149px">
                            <a href=""><h3>电影迷专区</h3><p>来来来,一起观影</p></a>
                        </el-card>
                    </el-col>
                    <el-col span="8" style="text-align: center;">
                        <el-card style="background-image: url(imgs/zq5.png);width:  296px;height: 149px">
                            <a href=""><h3>运动达人专区</h3><p>骑车,游泳,跑步...与你一起 </p></a>
                        </el-card>
                    </el-col>
                    <el-col span="8" style="text-align: center;">
                        <el-card style="background-image: url(imgs/zq6.png);width:  296px;height: 149px">
                            <a href=""><h3>铲屎官专区</h3><p>我与幸福,就差一只猫?</p></a>
                        </el-card>
                    </el-col>

                </el-row>
            </div>
        </el-main>
        <!--底端-->
        <el-footer>

        </el-footer>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr: ["imgs/b1.jpg", "imgs/b2.png", "imgs/b3.png", "imgs/b4.png"],

            }
        },
        methods: {}
    })
</script>
</html>